{% extends 'fengge/main_base2.html' %}

{% block html_body %}
	{% load staticfiles %}
		<div id="main_panel">  {# 主要部分 #}
			<div id="main_layers">  {# 用于盛装各页面层的容器 #}
				<div id="sidebar" class="sidebar collapsed">  {# 左侧工具栏, 本来不希望放在页面层容器中, 但它需要和地图图层并排 #}
					<div class="sidebar-tabs">  {# 工具栏最左侧的tab切换部分 #}
						<ul role="tablist" class="tool_tabs">
							{#						<li class="sidebar_tab_project {{ misc_info.project_tab_class }}">#}
							{#							<a href="#project_tab " role="tab" title="{{ misc_info.project_tab_name }}">#}
							{#								<i class="fa fa-th-list"></i>#}
							{#								<span>{{ misc_info.project_tab_name }}</span>#}
							{#							</a>#}
							{#						</li>#}
							{#					{% for tool_pane in tool_panes %}#}
							{#						{% if not tool_pane.info.sidebar_bottom_group %}#}
							{#							<li class="sidebar_tab_{{ tool_pane.name }} {{ tool_pane.info.sidebar_tab_class }}">#}
							{#								<a href="#{{ tool_pane.name }}_tab" role="tab" title="{{ tool_pane.zh_name }}">#}
							{#									<i class="{{ tool_pane.icon_class }}"></i>#}
							{#									<span>{{ tool_pane.zh_name }}</span>#}
							{#								</a>#}
							{#							</li>#}
							{#						{% endif %}#}
							{#					{% endfor %}#}
							{#						<li id="fg_logo"><a href="#logo_tab" role="tab" title="平台简介">{{ system_info.name }}</a></li>#}
						</ul>


						<ul role="tablist" class="info_tabs">
							{#					{% for tool_pane in tool_panes %}#}
							{#						{% if tool_pane.info.sidebar_bottom_group %}#}
							{#							<li class="sidebar_tab_{{ tool_pane.name }} {{ tool_pane.info.sidebar_tab_class }}">#}
							{#								<a href="#{{ tool_pane.name }}_tab" role="tab" title="{{ tool_pane.zh_name }}">#}
							{#									<i class="{{ tool_pane.icon_class }}"></i>#}
							{#									<span>{{ tool_pane.zh_name }}</span></a>#}
							{#							</li>#}
							{#						{% endif %}#}
							{#					{% endfor %}#}
							{% if is_developer %}
								<li><a href="#console_tab" role="tab" title="控制台"><i class="fa fa-stethoscope"></i></a></li>
							{% endif %}
							{#						<li><a href="#user_tab" role="tab" title="用户"><i class="fa fa-user"></i></a></li>#}
							{% if help_items %}
								<li><a href="#help" role="tab" title="帮助"><i class="fa fa-question-circle"></i></a></li>
							{% endif %}
						</ul>
					</div>

					<div class="sidebar-content">  {# 工具栏中的内容部分 #}
						{#					<div class="sidebar-pane" id="project_tab">#}
						{#						<h1 class="sidebar-header">{{ misc_info.project_tab_name }}<div class="sidebar-close"><i class="fa fa-angle-left"></i></div></h1>#}
						{#						<div id="project_panel" class="project_panel sidebar_panel"></div>#}
						{#					</div>#}
						{#				{% for tool_pane in tool_panes %}#}
						{#					<div class="sidebar-pane" id="{{ tool_pane.name }}_tab">#}
						{#						<h1 class="sidebar-header">{{ tool_pane.zh_name }}<div class="sidebar-close"><i class="fa fa-angle-left"></i></div></h1>#}
						{#						<div id="{{ tool_pane.name }}_panel" class="{{ tool_pane.name }}_panel sidebar_panel">#}
						{#							{{ tool_pane.contents|safe|escape }}#}
						{#						</div>#}
						{#					</div>#}
						{#				{% endfor %}#}
						{#					<div class="sidebar-pane" id="user_tab">#}
						{#						<h1 class="sidebar-header">用户<div class="sidebar-close"><i class="fa fa-angle-left"></i></div></h1>#}
						{#						<div id="user_pane" username="{{ request.user }}"></div>#}
						{#					</div>#}
						{#					<div class="sidebar-pane" id="logo_tab">#}
						{#						<h1 class="sidebar-header">平台简介<div class="sidebar-close"><i class="fa fa-angle-left"></i></div></h1>#}
						{#						<p>大贤 · 风格 是大贤科技推出的新一代能源气象平台，为用户提供便捷地查找、展示、下载各种气象数据的功能。</p>#}
						{#						<p>使用指南及相关信息见左下角的帮助栏（<i class="fa fa-question-circle" style="text-indent: 0;"></i>）。大家在使用中有什么反馈意见可以与我们联系。</p>#}
						{#						<p style="height: 30px"></p>#}
						{#						<div style="margin-left: 50px">#}
						{#							<p class="no-indent">平台技术支持: </p>#}
						{#							<p class="tight"><a href="mailto:windgrid@dxwind.com">windgrid@dxwind.com</a></p>#}
						{#							<p class="no-indent">能源气象咨询: </p>#}
						{#							<p class="tight"><a href="mailto:xw@dxwind.com">xw@dxwind.com</a></p>#}
						{#							<p class="tight">Tel: 15201020139</p>#}
						{#						</div>#}
						{##}
						{#						<p></p>#}
						{#						<div class="button_row">#}
						{#							<a href="http://yun.dxwind.com:7002/" target="_blank" class="button" style="float:right; width: 200px">大贤科技 先见之明云平台</a>#}
						{#						</div>#}
						{#						<div class="button_row" style="position:absolute; bottom:20px;left:10px; border-radius: 4px; overflow: hidden;">#}
						{#							<a href="http://yun.dxwind.com/" target="_blank"><img src="{% static 'login/dxwind-presee.png' %}" width="245px" height="42px" alt="" /></a>#}
						{#						</div>#}
						{##}
						{##}
						{#					</div>#}
						<div class="sidebar-pane" id="help">
							<h1 class="sidebar-header">帮助<div class="sidebar-close"><i class="fa fa-angle-left"></i></div></h1>
							<div class="sidebar-body">
								{% for item in help_items %}
									<div class="button helpitem"
									     {% if item.id %}id="{{ item.id }}"{% endif %}
									     title="{{ item.desc }}"
											{#								     {% if item.type == "link" %}onclick="window.open('{{ item.target }}', '_blank')"{% endif %}#}
											 {% if item.type == "link" %}onclick="FG.openTarget('{{ item.target }}')"{% endif %}
											 {% if item.style %}style="{{ item.style }}"{% endif %}
									>
										<i class="{{ item.icon_class }}"></i>
										<span>{{ item.name }}</span>
									</div>
								{% endfor %}
								{#							<div id="help-page" class="button helpitem"><i class="fa fa-question-circle"></i><span>使用指南</span></div>#}
								{#							<div id="about-datasets" class="button helpitem"><i class="fa fa-th-large"></i><span>数据集概览</span></div>#}
								{#							<div id="about-formats" class="button helpitem"><i class="fa fa-bar-chart"></i><span>数据格式</span></div>#}
								{#							<div id="announcement" class="button helpitem"><i class="fa fa-bullhorn"></i><span>系统公告</span></div>#}
								{#							<div id="update-log" class="button helpitem"><i class="fa fa-list-ol"></i><span>更新日志</span></div>#}
								{#							<div id="bug-log" class="button helpitem"><i class="fa fa-bug"></i><span>报告Bug</span></div>#}
								{#							<div id="dxwind" class="button helpitem"><i class="fa fa-home"></i><span>大贤主页</span></div>#}
							</div>
						</div>
						<div class="sidebar-pane" id="console_tab">
							<h1 class="sidebar-header">Console<div class="sidebar-close"><i class="fa fa-angle-left"></i></div></h1>
							<div class="sidebar-body">
								<div id="console"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="poplayer"></div>
{#			<div id="map_panel" class="sidebar-map map_pagelayer tool_pagelayer"></div>#}

{#		{% for toolname in tool_pagelayers %}#}
{#			<div id="{{ toolname }}_pagelayer" class="{{ toolname }}_pagelayer tool_pagelayer"></div>#}
{#		{% endfor %}#}
{#			<div id="user_panel" class="active">#}
{#				<div id="user_pane" username="{{ request.user }}"></div>#}
{#			</div>#}
{#			<div id="console_sidebar">#}
{#				{% if is_developer %}#}
{#					<div id="console"></div>#}
{#				{% endif %}#}
{#			</div>#}

			<div id="search"></div>  {# 搜索框 #}
			<div id="region_select" style="display: none; background-color: lightgray; width: 300px; height: 100px; position: relative;">
				{# 临时容器, 正在设法实现勾选区域后的功能选择框. 以后恐怕应当提供接口自动生成 #}
				<div id="style_select" style="position: relative; width: 200px; height: 100px; background-color: white; float: left"></div>
				<div id="data_feature_select" style="position: relative; width: 100px; height: 100px; background-color: lightgoldenrodyellow; float: left">
					<div class="button bigtoolbutton"><i class="fa fa-anchor"></i><span>添加数据区域</span></div>
				</div>
			</div>
		</div>
{#	</div>#}

	<div id="invisible" style="display:none">  {# 不可见部分 #}
		<div id="pointwidget_container"></div>
		<div id="snapshot_lists_container"></div>
	</div>
{% endblock %}

{% block script %}
	<script>
		var onWindowResize = function () {
{#			$('#project_panel').css("height", $('#sidebar').height() - $('#project_tab').children('.sidebar-header').height())#}
			$('.sidebar_panel').css("height", $('#sidebar').height() - $('.sidebar-pane').children('.sidebar-header').height())
			DX.shout('window:resized');
		};
		$(window).resize(onWindowResize);

		// 启动
		$(function() {
			$(".nano").nanoScroller();
			app = new FG.App();
			DX.set('app', app);
			DX.set('alerterType', 'alertify');
			onWindowResize();
			{% if is_developer %}
				DX.set('debug', true);
			{% endif %}
		})
	</script>

{% endblock %}
